import React, { FC, useEffect, useState } from 'react'
import {addPlanlist } from "@/services"
import styles from './addPlan.less'
import 'moment/locale/zh-cn';
import { observer } from 'mobx-react-lite';
import locale from 'antd/es/date-picker/locale/zh_CN';
import {Form,Input,DatePicker,InputNumber,Select,Button  } from 'antd';
import useStore from '@/context/useStore';
import {PlusCircleOutlined,CloseCircleOutlined} from '@ant-design/icons'

const AddPlan:FC=()=>{

  const { Option } = Select;
  const { RangePicker } = DatePicker;
  const [carindex, setcarindex] = useState('成员数')
  //手动
  const [hand,sethand]=useState(false)
  //自动
  const [auto,setauto]=useState(false)
  //手动
  const [values,setvalues]=useState('')

  const {addPlan}=useStore()

  function setnameList(){
    addPlanlist().then(res=>{
      setcarindex(res.data.length)
    })
  }

  useEffect(()=>{
    addPlan.getClassStudent()
  },[])

  function changeKrom(e:React.ChangeEvent<HTMLInputElement>){
    setvalues(e.target.value)
    console.log(e.target.value);
  }

  //全选
  function changeAll(){
    addPlan.CheckAll=!addPlan.CheckAll
    addPlan.addPlanList.forEach(item=>{
      item.flag=addPlan.CheckAll
    })
  }

  //单选
  function changeOne(id:string){
    addPlan.addPlanList.forEach(item=>{
      if(item.id == id){
          item.isMove=false
          item.flag=false
      }
    })
  }

  function changeStatus(id:string){
    addPlan.addPlanList.forEach(item=>{
      if(item.id=id){
        item.flag=!item.flag
      }
    })
    addPlan.CheckAll=addPlan.addPlanList.every(item=>item.flag)
    console.log(addPlan.addPlanList);
    
  }
  //时间戳
  const onFinish = (value:any)=>{
    function add0(m:any){
      return m<10?'0'+m:m 
    }
    function format(shijianchuo:any)
    {
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
    }
    let a = format(value.time[0]._d)
    let b = format(value.time[1]._d)

    console.log(value)
  }
  return (
    <div className={styles.addPlan}>
    <div className={styles.connect}>
      <div className={styles.top}>
        <div className={styles.tops}>
          <Form onFinish={onFinish}>
            <div>
              <Form.Item label='班级' className={styles.team}>
                <Select defaultValue="请选择班级" style={{ width: 120 }} className={styles.select}
                 onChange={setnameList} >
                  <Option type='' value="网站2021A班">网站2021A班</Option>
                </Select>
              </Form.Item>
              <Form.Item label='成员' name='username' className={styles.team}>
                  <Input type='username' className={styles.input} placeholder={carindex} disabled={true} />
              </Form.Item>
              <Form.Item label='分组' name ='zhu' >
                  <InputNumber type='zhu' style={{ width: '70px' }} min={1} max={10} defaultValue={1} />
              </Form.Item>
            </div>
            <div  className={styles.content}>
              <Form.Item label='计划' name='planname' >
                  <Input type='planname' className={styles.inputs} placeholder="请输入计划" onChange={changeKrom}/>
              </Form.Item>
            </div>
            <div className={styles.bottom}>
              <Form.Item label =' 日期' name=' time'>
                <RangePicker  locale={locale}  />
              </Form.Item>
            </div>

            <div className={styles.button}>
              <Button className={styles.buttons} onClick={()=>{
                  if(!values){
                    console.error('内容不能为空');
                  }else{
                    setauto(true)
                    addPlan.num=1
                    addPlan.list=[`组${addPlan.num}`]
                    addPlan.addPlanList.forEach(item=>{
                      item.flag=true
                      item.dist=addPlan.list[0]
                      item.isMove=true
                    })
                  }
              }}>自动分组</Button>
              <Button className={styles.buttonss} onClick={()=>{
                console.log(values,'values...');
                if(!values){
                  console.error('内容不能为空');
                }else{
                  sethand(true)
                }
              }}>手动分组</Button>
            </div>
          </Form>
        </div> 


              {
                auto&&<div className={styles.auto}>
                  <div className={styles.autobox}>
                    <div style={{padding:'10px'}}><h3>分组</h3></div>
                    <div className={styles.left}>
                    <div className={styles.allYes}><input style={{marginLeft:'15px'}} type="checkbox" onChange={changeAll} checked={addPlan.CheckAll} /><span style={{fontSize:'15px',marginLeft:'15px'}}>全选</span></div>
                        <ul className={styles.ulList}>
                          {
                            addPlan.addPlanList.length&&addPlan.addPlanList.map(item=>{
                              return item.isMove==false&&<li key={item.userid} className={styles.leftul}>
                                <input type="checkbox" onChange={()=>{changeStatus(item.id)}} checked={item.flag}/>
                                <img className={styles.imgs} src={item.avatar} alt="" />
                                <div>{item.username}</div>
                              </li>
                            })
                          }
                        </ul>
                    </div>
                    <div className={styles.right}>
                      <div style={{fontSize:'17px'}}>当前已分{addPlan.list.length}个小组</div>
                      <div className={styles.createTeam} onClick={()=>{
                        addPlan.num +=1
                        addPlan.list.push(`组${addPlan.num}`)
                        console.log(addPlan.list);
                        addPlan.addPlanList.map((item,index)=>{
                          if(item.isMove==false){
                            item.dist=`组${addPlan.num}`
                          }
                          return item
                        })
                        console.log('addplan.addplanlist..',addPlan.addPlanList);
                      }}>
                        <PlusCircleOutlined/>
                        创建小组
                      </div>
                      <ul className={styles.ulright}>
                        {
                          addPlan.list.map((item,index)=>{
                            return <li key={index+'a'}>
                              <div className={styles.titles}>
                                  <PlusCircleOutlined className={styles.Adds} onClick={()=>{
                                    addPlan.addPlanList.forEach(item1=>{
                                      item1.isMove=item1.flag
                                    })
                                  }}/>
                                  <div>{item}</div>
                              </div>
                              <ul className={styles.rightull}>
                                {
                                  addPlan.addPlanList.map((item2,index2)=>{
                                    return item==item2.dist&&item2.isMove==true&&<li key={index2+'b'}>
                                        <img className={styles.imgs} src={item2.avatar} alt="" />
                                        <CloseCircleOutlined onClick={()=>{changeOne(item2.id)}}/>
                                        <span>{item2.username}</span>
                                    </li>
                                  })
                                }
                              </ul>
                            </li>
                          })
                        }
                      </ul>
                    </div>
                    <Button onClick={()=>{
                      setauto(false)
                      addPlan.addPlanList.forEach(item=>{
                        item.flag=false
                        item.isMove=false
                        item.dist=''
                      })
                      addPlan.num=0
                      addPlan.list=[]
                    }}>
                      取消
                    </Button>
                    <Button type="primary" onClick={()=>{
                      addPlan.newaddPlanList=addPlan.addPlanList.filter(item=>{
                        return item.isMove=true
                      })
                      console.log('newaddplanList',addPlan.newaddPlanList.length);
                      if(addPlan.list.length&&addPlan.newaddPlanList.length){
                        setauto(false)
                      }else{
                        console.info('请分配人员')
                      }
                      if(addPlan.newaddPlanList!=[]){
                        addPlan.islook=true
                      }
                    }}>
                      确认
                    </Button>
                  </div>
                </div>
              }
              {
                hand&&<div className={styles.auto}>
                  <div className={styles.autobox}>
                    <div style={{padding:'10px'}}><h3>分组</h3></div>
                    <div className={styles.leftList}>
                      <ul className={styles.left}>
                        <li>全选 <input type="checkbox" onChange={changeAll} checked={addPlan.CheckAll}/></li>
                        {
                          addPlan.addPlanList!=[]&&addPlan.addPlanList.map(item=>{
                            return item.isMove==false&&<li key={item.userid} className={styles.leftul}>
                                <input type="checkbox" onChange={()=>{changeStatus(item.id)}} checked={item.flag}/>
                                <img src={item.avatar} className={styles.imgs} alt="" />
                                <span>{item.username}</span>
                            </li>
                          })
                        }
                      </ul>
                    </div>
                    <div className={styles.right}>
                      <div style={{fontSize:'17px'}}>当前已分{addPlan.list.length}各小组</div>
                      <div className={styles.createTeam}  onClick={()=>{
                        addPlan.num += 1
                        addPlan.list.push(`组${addPlan.num}`)
                        console.log(addPlan.list);
                        addPlan.addPlanList.map((item,index)=>{
                            if(item.isMove==false){
                              item.dist=`组${addPlan.num}`
                            }
                            return item
                        })
                        console.log('addPlan.addPlanList...',addPlan.addPlanList);
                      }} >
                        <PlusCircleOutlined className={styles.Adds} />创建小组
                      </div>
                      <ul className={styles.ulright}>
                        {
                          addPlan.list.map((item,index)=>{
                            return <li key={index+'a'}>
                              <div className={styles.titles}>
                                <PlusCircleOutlined className={styles.Adds} onClick={()=>{
                                  addPlan.addPlanList.forEach(item1=>{
                                    item1.isMove=item1.flag
                                  })
                                }}/>
                                <span>{item}</span>
                              </div>
                              <ul className={styles.rightull}>
                                {
                                  addPlan.addPlanList.map((item2,index2)=>{
                                    return item == item2.dist && item2.isMove == true && <li key={index2+'t'}>
                                        <img src={item2.avatar} className={styles.imgs} alt="" />
                                        <CloseCircleOutlined className={styles.iconRight}  onClick={()=>(changeOne(item2.id))}/><span>{item2.username}</span>
                                    </li>
                                  })
                                }
                              </ul>
                            </li>
                          })
                        }
                      </ul>
                    </div>
                    <Button onClick={()=>{
                      sethand(false)
                      addPlan.addPlanList.forEach(item=>{
                        item.flag=false
                        item.isMove=false
                        item.dist=''
                      })
                      addPlan.list=[]
                    }}>
                      取消
                    </Button>
                    <Button type="primary" onClick={()=>{
                      addPlan.newaddPlanList=addPlan.addPlanList.filter(item=>{
                        return item.isMove=true
                      })
                      console.log('newaddPlanList....',addPlan.newaddPlanList);
                      if(addPlan.list.length&&addPlan.newaddPlanList.length){
                        sethand(false)
                      }else{
                        console.info('请分配人员')
                      }
                      
                    }}>
                      确认
                    </Button>
                  </div>
                </div>
              }

              <div className={styles.newbox}>
                  <div  className={styles.newaddPlanList}>
                      {addPlan.list[0]&& <h4 className={styles.list} style={{fontSize:'25px'}}>{addPlan.list[0]}</h4>}
                      {addPlan.list[0]&& <h4 className={styles.list}>项目计划0个</h4>}
                      {addPlan.list[0]&& <h4 className={styles.list}>任务0个</h4>}
                      {
                        addPlan.newaddPlanList&&addPlan.newaddPlanList.map((item,index)=>{
                          return item.dist=='组1'&& <div className={styles.teamname}key={index+'d'}>
                              <span>{item.username}</span>
                          </div>
                        })
                      }
                  </div>
              </div>
      </div>
    </div>
    </div>
  )
}
export default observer(AddPlan)